【小ネタ】極力キーボードから手を離したくないライトvimmerがVSCodeに設定しているショートカット（基本的なファイル操作編）

VSCodeのファイル操作周りのショートカット設定について、個人的に便利な設定を書き出してみました！

#VSCode（Visual Studio Code）

今泉大樹

2022.09.30

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、AWS事業本部コンサルティング部に所属している今泉（@bun76235104）です。

私はnvimとVSCodeをエディタとして利用しています。

基本的にnvimで作業をしますが、特定の拡張機能を使う必要があったり、周りとペアプログラミングをする時にはVSCodeを使うような形です。

そんなライトなvimmerの私がVSCodeを利用する際に設定しているショートカットについて小ネタとして紹介します。

前提条件と環境

私が利用している環境は以下のとおりです。

Windowsユーザーの方とは使用するショートカットキーが異なるため、ご留意ください。

※ JSONファイルの設定自体は参考になるかと思います。


OS	MacOS Monterye
VSCode	1.71.2(Universal)

言葉の定義やショートカットキーの設定方法について

以下小技に対する「使用頻度」は以下のような意味で記載しています。

使用頻度	意味
高	5分~10分に1回は利用する。これがないとコーディングできない
中	30分~1時間に1回は利用する。効率化のためにキーボードで操作したい。
低	1日のコーディングのうち数回は利用する。

また、VSCodeではkeybindings.jsonというファイルを編集することで、任意のショートカットキーを設定可能です。

Cmd+shift+p のコマンドパレットからkeyboard と打つことで、「基本設定：　キーボードショートカットを開く（JSON）」を選択することでkeybindins.jsonを編集できます。

以下、ショートカットの設定内容について記載していますが、そこで表示する設定はkeybindings.jsonに記載している内容となります。

具体的な設定の前に。ショートカット設定で知っておいたら便利なこと

ショートカットをGUIで設定する

ショートカットを設定したいけど、なんていうアクションなんだろう？今の設定はどうなっているんだろう？

という時には、shift+Cmd+pでコマンドパレットを表示してkeyboardと打ち、「基本設定：　キーボードショートカットを開く」からグラフィカルにショートカットを編集できます。

公式のサイトを見るほどではないけど、サクッと現在の設定値を検索したい時にも便利です。

以下ではrenameと検索して、「ファイル名を変更する」っぽいアクションを探しています。

vscode_keyboard_shortcut_edit_by_gui

ショートカットを設定する時に参照すると良いサイト

「サイドバーでエクスプローラーを開いている時だけ、このショートカットを割り当てたい」などの要望があるかと思います。

keybindings.jsonではwhenという設定値で調整可能です。

そのときは公式のwhen clause contextsを確認しています。

Available contextsで自分が探しているコンテキスト（状況）の名前を探します。

ファイルツリー（エクスプローラー）操作のショートカットキー

これからサンプルで利用するプロジェクトのディレクトリ構成は以下のようになっています。

.
├── README.md
├── sample2
│   └── test1.txt
└── sample_files
    ├── test1.txt
    ├── test2.txt
    └── test3.txt

Quick Openで手軽にファイルを開く（使用頻度: 高）

おそらく多くの方が最も利用している機能です。

以下のように Cmd+p を押すことでテキストボックスが現れてファイル名やフォルダ名で検索できます。

vscode_mac_quickopen_demo

なんとなくファイル名が分かっているときは、この機能を利用してファイルを開きます。

この機能はCmd+shift+p のコマンドパレットと同じレベルで必須の機能だと思います。

サイドバーにエクスプローラーを開く（使用頻度: 中）

ファイルを開く時にはQuick Openでファイルを開きますが、プロジェクトの構造を俯瞰したい時があります。

その際、私の場合Cmd+0でファイルのエクスプローラーを開けるようにしていますが、デフォルトではshift+Cmd+e で開けます。

vscode_open_exploer_demo

以下のようにショートカットを設定しています。


[
  // サイドバーのファイラーへ移動
  {
    "key": "cmd+0",
    "command": "workbench.view.explorer"
  },
  // その他の設定を記載している
]

キーボード操作でエクスプローラーからファイルを開く（使用頻度: 中）

せっかくキーボードで開いたエクスプローラーをマウスで操作したくありません。

上下左右のカーソルキーでも当然移動できますが、私はライトなvimmerなのでNeo Vimの拡張機能を導入しており以下のようにエクスプローラー上で移動ができるようになっています。

jで下に移動
kで上に移動
hで左に移動（1階層上へ）
lで右に移動（1階層下へ）

vscode_exploer_move_focus_demo

Neo Vim拡張を入れていなくても、以下記事のようにショートカットを設定できるようです。

【参考】

以前zenn.devに投稿したNeo Vim拡張導入時の記事です。

キーボード操作でエクスプローラーからファイル/フォルダの新規作成・リネーム・削除（使用頻度: 低〜中）

上記のzenn.devの参考記事にも記載していますが、基本的なファイル操作についても以下のようにショートカットを設定しています。

[
  // 新規ファイル作成
  {
    "key": "shift+cmd+n",
    "command": "explorer.newFile"
  },
  // 新規フォルダ作成
  {
    "key": "shift+cmd+m",
    "command": "explorer.newFolder"
  },
  // dでファイルを削除
  {
    "key": "d",
    "command": "deleteFile",
    "when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceReadonly && !inputFocus"
  },
  {
    "key": "alt+cmd+backspace",
    "command": "-deleteFile",
    "when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceReadonly && !inputFocus"
  },
  // rでファイルのリネーム
  {
    "key": "r",
    "command": "renameFile",
    "when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus"
  },
  {
    "key": "enter",
    "command": "-renameFile",
    "when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus"
  },
  // vで分割して開く
  {
    "key": "v",
    "command": "explorer.openToSide",
    "when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus"
  },
  // ファイルのコピー
  {
    "key": "y",
    "command": "filesExplorer.copy",
    "when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus"
  },
  // ファイルのペースト
  {
    "key": "p",
    "command": "filesExplorer.paste",
    "when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus"
  },
  // shift+y で相対パスをコピー
  {
    "key": "shift+y",
    "command": "copyRelativeFilePath",
    "when": "!editorFocus"
  },
  {
    "key": "shift+alt+cmd+c",
    "command": "-copyRelativeFilePath",
    "when": "!editorFocus"
  },
  // 他の設定
]

ファイル横断の文字列検索など

ファイル間を横断した検索（使用頻度：低）

たまにプロジェクト配下のファイルを横断して検索したいことがあります。

そんな時にも極力マウスを使わずに検索結果を横断したいものです。

まずは Cmd+shift+f を押すことで検索したいワードを入力します。

検索結果がある場合F4を押下することで、次の検索結果にジャンプできますし、shift+F4で前の結果に戻ることができます。

私はファンクションキーまで手を伸ばすのが面倒ですので、以下のように「検索結果がある　かつ　サイドバーで検索画面を開いている時」にnキーで移動できるように設定してみました。

ただし、この場合「検索文字列を入力」した後にescキーで一度入力欄からフォーカスを外して、nを押下すると手順が増えています。また、サイドバー検索画面の開閉も微妙に面倒です。

私は慣れてしまっているので気になりませんが、素直にF4キーを押下することに慣れた方が良いと思いました。

なお、以下デモはF4キーを利用していますが、ショートカットをnキーで設定しているため、表示されるキーがNとなっています。

vscode_search_file_shortcut_demo

ショートカットの設定値は以下のとおりです。（前述のとおり、こだわりがなければF4キーで慣れた方が良いと思います）

[
  // サイドバーに表示される検索結果に素早く移動する
  {
    "key": "n",
    "command": "search.action.focusNextSearchResult",
    "when": "hasSearchResult && searchViewletVisible && !inputBoxFocus"
  },
  {
    "key": "shift+n",
    "command": "search.action.focusPreviousSearchResult",
    "when": "hasSearchResult && searchViewletVisible && !inputBoxFocus"
  },
  // エディターエリ以外でescを押すとフォーカス外す
  {
    "key": "escape",
    "command": "workbench.action.blur",
    "when": "!editorFocus"
  },
  // サイドバーの開閉
  {
    "key": "cmd+n",
    "command": "workbench.action.toggleSidebarVisibility"
  },
  // 他の設定
]